<!--
 * @Description: 地图
 * @Author: charles
 * @Date: 2021-05-05 23:34:12
 * @LastEditors: 梁清福
 * @LastEditTime: 2022-01-10 20:58:10
-->
<template>
  <div ref="root" style="height: 100%"></div>
</template>

<script>

import {get} from '../../../utils/request'

export default {
    data(){
      return{}
    },
    mounted(){
        this.initMap()
    },
    methods:{
      initMap(){
        var map = new AMap.Map(this.$refs.root,{
        zoom: 10,  //设置地图显示的缩放级别
        center: [116.397428, 39.90923],//设置地图中心点坐标
        viewMode: '3D',  //设置地图模式
        });
        // 行政区划分
        let polygons=[];
      var opts = {
          subdistrict: 0,   //获取边界不需要返回下级行政区
          extensions: 'all',  //返回行政区边界坐标组等具体信息
          level: 'district'  //查询行政级别为 市
      };
      let district = new AMap.DistrictSearch(opts);
      district.setExtensions('all');
      district.search('太谷区', function(status, result) {
          map.remove(polygons)//清除上次结果
          polygons = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
              for (var i = 0, l = bounds.length; i < l; i++) {
                  //生成行政区划polygon
                  var polygon = new AMap.Polygon({
                      strokeWeight: 1,
                      path: bounds[i],
                      fillOpacity: 0.4,
                      fillColor: '#80d8ff',
                      strokeColor: '#0091ea'
                  });
                  polygons.push(polygon);
              }
          }
          map.add(polygons)
          map.setFitView(polygons);//视口自适应
      });

      let url="dashboard/findEngineerDeviceTree"
      get(url).then(resp=>{
        let edTree=resp.data;
        let devices=[];
        edTree.forEach(item => {
            devices.push(...item.children)
            
        });
        console.log(edTree)
        devices.forEach(item=>{
                // 打点
        var marker = new AMap.Marker({
        position: item.position, 
        title: item.name
        });

      map.add(marker);

        })
      })



    
            }
    }

};
</script>

